﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../scripts/footer.js"></script>
    <script src="../src/js/rayui.js" use="timerbtn"></script>
    <script src="../scripts/common.js"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h3>1、计时按钮</h3>
    <a class="rayui-btn btn-primary" id="timerbtn1">倒计时按钮到0</a>
    <a class="rayui-btn btn-success" id="timerbtn2">增计时到10</a>
    <a class="rayui-btn btn-warning" id="timerbtn3">增计时到10</a>
    <a class="rayui-btn btn-danger" id="timerbtn4">格式化显示内容</a>
    <div class="card">
        <pre class="word-wrap">
使用方法：
var ins = $("selector").timerBtn(options);
var ins = rayui.timerbtn.render(options);此时option必须含有elem属性

1、options参数：
    elem：标签，视调用方法而定
    min: 最小值，默认0,
    max: 最大值，默认10,
    format: 格式化显示内容，function(text)，返回值作为显示内容
    auto：是否自动开始，可选true|false，默认false，需要手动调用start方法
    down: 是否递减，可选true|false。默认true递减；false递增
    step: 步幅，每次增减数值，默认1。可为小数，为小数时按照本参数保留小数，和max、min无关
    interval: 执行间隔，单位毫秒，默认1000ms=1s,
    unit: 单位，默认's',
    timerText: 倒计时显示文本
    disabledClass: 是否添加禁用样式，可选true|false，默认true

2、ins返回对象包含两个方法：
        a）start()：开始计时
        b）stop()：停止计时

</pre>
    </div>


    <script>
        rayui.ready(function () {

            var timerbtn = rayui.timerbtn;

            //计时按钮
            function regTimerBtn(id, options) {
                var $obj = $('#' + id);
                $obj.timerBtn(options);
            }
            timerbtn.render({ elem: "#timerbtn1" });
            //regTimerBtn("timerbtn1");
            regTimerBtn("timerbtn2", { down: false, step: 0.2, min: 8, disabledClass: false });
            regTimerBtn("timerbtn3", { down: false, step: 0.2, min: 8, timerText: "自定义文本" });
            regTimerBtn("timerbtn4", { down: false, step: 0.2, min: 8, format: function (text) {
                    return text.replace('(',"-").replace(')','');
                }
            });

        });

    </script>


</body>
</html>